<template>
    <div>
        <div class="top" style="position: relative">
            <div style="padding: 10px;font-weight: bold">{{examInfo.name}}</div>
            <div style="font-size: 8px">{{examInfo.endTime}}</div>
            <div style="display: flex;position: absolute;bottom: 0px;width: 100%">
                <div style="flex: 1">考生姓名：{{examInfo.studentName}}</div>
                <div style="flex: 1">考试用时：{{examInfo.examUseTime}}</div>
                <div style="flex: 1">考试得分：{{examInfo.examScores}}</div>
            </div>
        </div>
        <div class="exam-list">
            <el-card class="box-card" v-for="(item,index) in examInfo.singleChoice">
                <div style="margin: 10px">{{item.name}}</div>
                <el-radio-group :value="radio" class="radios">
                    <el-radio  class="e" :label="1">A: {{item.A}}</el-radio><br>
                    <el-radio  class="e" :label="2">B: {{item.B}}</el-radio><br>
                    <el-radio  class="e" :label="3">C: {{item.C}}</el-radio><br>
                    <el-radio  class="e" :label="4">D: {{item.D}}</el-radio>
                </el-radio-group>
                <span style="margin: 20px">
                    <span style="color: rgb(36, 218, 112);margin-right: 70%;">正确答案:{{examInfo.singleAnswer.right[index]}}</span>
                    <span :style="{color:(examInfo.singleAnswer.right[index]==examInfo.singleAnswer.select[index]?'rgb(36, 218, 112)':'red')}">
                        答题结果:{{examInfo.singleAnswer.select[index]}}
                    </span>
                </span>
            </el-card>
        </div>

    </div>

</template>
<script>
    export default {
        data(){
            return{
                i:0,
                radio:1,
                examInfo:{
                    name:"JAVA基础模拟考试",
                    endTime:"2021/7/22 21:11",
                    studentName:"小刘",
                    examUseTime:"20分钟",
                    examScores:"90分",
                    singleChoice:[
                        {
                            name:"java对象是什么?",
                            A:"我1谁",
                            B:"我1谁",
                            C:"我1谁",
                            D:"我1谁",
                        },{
                            name:"对象是什么?",
                            A:"我2谁",
                            B:"我2谁我2谁我谁我谁我2谁我2谁",
                            C:"我2谁",
                            D:"我2谁",

                        },{
                            name:"python对象是什么?",
                            A:"我3谁",
                            B:"我3谁",
                            C:"我3谁",
                            D:"我3谁",
                        },
                    ],
                    singleAnswer:{
                        right:['A','B','C'],
                        select:['A','D','C']
                    },
                    multipleChoice:[
                        {
                            name:"多选题一!!",
                            multipleOption:[
                                "第一题","第二题","第三题","第四题","第五题",
                            ]
                        }, {
                            name:"多选题2",
                            multipleOption:[
                                "第一1题","第二1题","第三1题","第四1题","第五1题",
                            ]
                        }, {
                            name:"多选题3",
                            multipleOption:[
                                "第一2题","第二2题","第三2题","第二2题","第三2题","第二2题","第三2题"
                            ]
                        }, {
                            name:"多选题",
                            multipleOption:[
                                "第一3题","第二3题","第三3题"
                            ]
                        }, {
                            name:"多选题",
                            multipleOption:[
                                "第一4题","第二4题","第三4题"
                            ]
                        },
                    ]
                }
            }
        }
    }
</script>
<style scoped>
    .top{
        width: 100%;
        height: 100px;

    }
    .exam-list{

    }
    .box-card{
        width: 100%;
        min-height: 200px;
        margin: 10px 0;
        text-align: left;
    }
    .radios{
        float: left;
        width: 100%;
        margin: 10px;
    }
    .e{
        margin: 8px;
    }
</style>